<template>
	<view class="">
		<view class="login">
			<view class="user-profile">
				<view class="info">
					<view class="avatar cu-avatar xl round margin-left">
						<u-avatar :src="vk.getVuex('$user.userInfo.avatar')" size="large"></u-avatar>
					</view>
					<view class="intro">
						<view class="row">
							<view class="nickname">
								{{ vk.getVuex('$user.userInfo.nickname') }}
							</view>
							<u-button type="primary" size="medium" plain v-if="vk.pubfn.isNull(vk.getVuex('$user.userInfo'))" @click="login"> 登 录 </u-button>
							<u-button type="primary" size="medium" plain v-else @click="logout">退出登录</u-button>
						</view>
						<view class="row">
							<view class=""></view>
							<view class=""></view>
		
						</view>
					</view>
				</view>
				<view class="points">
		
				</view>
			</view>
		</view>
		
		<view class="content">
			<block v-if="vk.pubfn.isNotNull(vk.getVuex('$user.userInfo'))">
				
				<block v-if="isUser">
					<view class="row-btn" @click="pageTo('/pages_case/case/list')">
						<view>申请记录</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
				</block>
				<block v-if="isEmployee">
					<view class="row-btn" @click="pageTo('/pages_case/case/list?action=working&title=正在办理')">
						<view>正在办理</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
					<view class="row-btn" @click="pageTo('/pages_case/case/list?action=over&title=已结案')">
						<view>已结案</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
				</block>
				<!-- 调委会 -->
				<block v-if="isAdmin">
					<view class="row-btn" @click="pageTo('/pages_case/case/list?action=audit&title=最新申请')">
						<view>最新申请</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
					<view class="row-btn" @click="pageTo('/pages_case/case/list?action=working&title=正在办理')">
						<view>正在办理</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
					<view class="row-btn" @click="pageTo('/pages_case/case/list?action=over&title=已结案')">
						<view>已结案</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
					<!-- <view class="row-btn" @click="pageTo('/pages/admin/employee/list')">
						<view>维护调解员</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view> -->
					<view class="row-btn" @click="pageTo('/pages/feedback/list')">
						<view>回复留言</view>
						<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
					</view>
				</block>
				
				<!-- <u-gap height="10" bg-color="#aaa"></u-gap>
				<view class="row-btn u-relative" @click="pageTo('/pages/notice/list')">
					<view class="">消息通知</view>
					<u-badge is-dot :count="noticeTotal" type="error" :offset="offset"></u-badge>
					<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
				</view>
				<view class="row-btn" @click="setUserInfo">
					<view>完善个人信息</view>
					<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
				</view>
				<view class="row-btn" @click="pageTo('/pages/userCenter/my/sign/sign')">
					<view>修改签名</view>
					<u-icon class="icons" name="arrow-right" size="40" color="#333333"></u-icon>
				</view> -->
			</block>
		</view>
		<!-- <view class="content">
			<u-button type="primary" @click="login(1)">调委会登录</u-button>
			<u-button type="warning" @click="login(2)">调解员登录</u-button>
		</view> -->
	</view>
</template>

<script>
	// const demoUser = [{
	// 		_id: "001",
	// 		role: null,
	// 		nickname: '赵一飞',
	// 		mobile: '13011111111',
	// 		sign: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/3fce00fe-13ce-4369-9af2-c9f449138323.png',
	// 	},
	// 	{
	// 		_id: "901",
	// 		role: ['admin'],
	// 		nickname: '委员会管理员1',
	// 		mobile: '18271881111',
	// 		sign: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/c6ceffb0-5ce5-419a-b2e7-ac6bf6c09dbd.png',
	// 	},
	// 	{
	// 		_id: "801",
	// 		role: ['employee'],
	// 		nickname: '调解员1',
	// 		mobile: '18704081111',
	// 		sign: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/b7f18654-d561-48e2-9d89-3dd3c2d313e3.png',
	// 	}
	// ]
	export default {
		data() {
			return {
				isAdmin: vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_admin',
				isEmployee: vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_employee',
				isUser: vk.getVuex('$user.userInfo.role[0]') == '',
								
				noticeTotal: 0,
				offset: [42, 50]
			}
		},
		onLoad() {
			console.log('my onLoad', vk.getVuex('$user.userInfo.role[0]'))
		},
		mounted() {
			console.log('my mounted')
		},
		onPullDownRefresh(){
			
		},
		onShow() {
			this.isAdmin = vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_admin';
			this.isEmployee = vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_employee';
			this.isUser = vk.getVuex('$user.userInfo.role[0]') == '';
			this.getNoticeTotal();
		},
		methods: {
			getNoticeTotal(){
				vk.callFunction({
					url: this.$api.NotReadNoticeList,
					loading: true,
					success: (res) => {
						console.log(res)
						this.noticeTotal = res.total;
					}
				})
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			// login(type) {
			// 	vk.setVuex("$user.userInfo", demoUser[type])
			// 	vk.navigateTo('/pages_case/case/list');
			// },
			// 登录
			login(flag) {
				let url = "/pages/userCenter/login/index/index"
				if(flag == 1 || flag == 2) url = "/pages/userCenter/login/employee/index"
				uni.navigateTo({
					url,
					events: {
						loginSuccess: () => {
							// 随便修改一下data值，刷新页面绑定值。  也可以 this.userInfo = vk.getVuex('$user.userInfo');
							this.refreshTime = new Date().getTime();
							this.isAdmin = vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_admin';
							this.isEmployee = vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_employee';
							this.isUser = vk.getVuex('$user.userInfo.role[0]') == '';
							
							// console.log('==== 登录回调 ====', vk.getVuex('$user.userInfo'), vk.getVuex('$user.userInfo.role[0]'), this.isAdmin, this.isEmployee, this.isUser)
						}
					}
				})
			},
			logout(){
				vk.userCenter.logout({
					success: (data) => {
						vk.toast("已退出登录!");
						this.isAdmin= false;
					}
				});
			},
			// 设置用户昵称头像
			setUserInfo() {
				vk.navigateTo('/pages/userCenter/my/profile/profile');
				
				return;
				
				let that = this;
				// #ifdef MP-WEIXIN
				try {
					vk.navigateTo('./set-user-info');
				} catch (err) {
					vk.alert("您的微信版本过低，请先更新微信!");
				}
				// #endif

				// #ifndef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: (data) => {
								that.data = data;
								let {
									userInfo
								} = data;
								vk.userCenter.updateUser({
									data: {
										nickname: userInfo.nickName,
										avatar: userInfo.avatarUrl,
										gender: userInfo.gender
									},
									success: (data) => {
										vk.alert("设置成功");
									}
								});
							}
						});
					}
				});
				// #endif
			},

		}
	}
</script>

<style scoped>
	.demo-btn {
		margin-bottom: 60rpx;
		width: 100%;
	}

	.row-btn {
		height: 100rpx;
	}
</style>
<style scoped lang="scss">
	.line {
		margin: auto;
		justify-content: space-between;
		align-items: flex-end;
		width: 90%;
		height: 50px;
	}

	.shareBtn {
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		background-color: #fff;
		line-height: inherit;
		font-size: inherit;
		width: 100%;
		text-align: left;
	}

	.shareBtn::after {
		display: none;
	}

	.line-text-mini {
		width: 100upx;
		color: #aaa;
		font-size: 10px;
	}

	.login {
		display: flex;
		justify-content: center;
		// align-items: center;
		width: 100%;
		height: 300upx;
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-adf91af7-51bf-4e2e-abae-1ed51120ab92/170aa423-2bb0-46ac-bad6-649735189980.jpg') no-repeat center;
		background-size: cover;
		border-radius: 0 0 15% 15%;

		.user-profile {
			margin: auto;
			margin-top: 50upx;
			width: 100%;
			color: #333;

			.info {
				display: flex;
				align-items: center;
				width: 100%;

				.avatar {
					margin: 0 30upx;
					width: 160upx;
					height: 160upx;
				}

				.intro {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					height: 200upx;

					.row {
						display: flex;
						justify-content: flex-start;
						width: 100%;

						.nickname {
							width: 300upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 1.5em;
							font-weight: 700;
						}

						.logout {
							margin-left: 20upx;
							color: #888;
						}
					}
				}
			}

			.points {
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.block {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					height: 90upx;
					text-align: center;
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 80rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-avatar-demo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
	}
</style>